import React, { Component } from "react";
import {
  View,
  Dimensions,
  StyleSheet,
  Platform,
  RefreshControl,
  FlatList,
} from "react-native";
import Carousel, { ParallaxImage } from "react-native-snap-carousel";

import img3 from "assets/images/erha3.jpg";
import img4 from "assets/images/erha4.jpg";
import img5 from "assets/images/erha5.png";
import img6 from "assets/images/erha6.jpg";
import img7 from "assets/images/erha7.png";
import img8 from "assets/images/erha8.jpeg";

// import Carousel, { ParallaxImage } from 'react-native-snap-carousel';
// import { Dimensions, StyleSheet } from 'react-native';

const { width: screenWidth, height } = Dimensions.get("window");

const screenHeight = height - 88;

class MyCarousel extends Component {
  state = {
    refreshing: false,
    activeSlideAlignment: "center",
    data: [
      { key: "001", img: img3 },
      { key: "002", img: img4 },
      { key: "003", img: img5 },
      { key: "004", img: img6 },
    ],
  };

  localOnRefresh = () => {
    this.setState({ refreshing: true });
    setTimeout(() => {
      this.setState({ refreshing: false });
    }, 2000);
  };

  localChangeData = () => {
    const { data } = this.state;
    this.setState({
      data: [...data, { key: "005", img: img7 }, { key: "006", img: img8 }],
    });
  };

  // eslint-disable-next-line
  onVerticalItemsChanged = ({ viewableItems }) => {
    // if (viewableItems[0].item.key !== "001") {
    //   this.setState({ activeSlideAlignment: "center" });
    // }
  };

  render() {
    const { refreshing, data, activeSlideAlignment } = this.state;
    const _renderItem = ({ item, index }, parallaxProps) => {
      // console.log(parallaxProps);

      return (
        // <View style={{ ...styles.item, marginTop: -100 }}>
        //   <ParallaxImage
        //     source={item.img}
        //     containerStyle={styles.imageContainer}
        //     style={styles.image}
        //     parallaxFactor={0.4}
        //     {...parallaxProps}
        //   />
        // </View>
        <View key={item.key} style={{ marginTop: index === 0 ? -50 : 0 }}>
          <FlatList
            data={data}
            horizontal
            initialNumToRender={1}
            windowSize={1}
            // onViewableItemsChanged={this.localOnChangePage}
            renderItem={({ item: cItem }) => (
              // <Image source={cItem.img} />
              // <ParallaxImage
              //   source={cItem.img}
              //   containerStyle={styles.imageContainer}
              //   style={styles.image}
              //   parallaxFactor={0.4}
              //   {...parallaxProps}
              // />
              <View
                style={{ ...styles.item, paddingLeft: 10, paddingRight: 10 }}
              >
                <ParallaxImage
                  source={cItem.img}
                  containerStyle={styles.imageContainer}
                  style={styles.image}
                  parallaxFactor={0.4}
                  {...parallaxProps}
                />
              </View>
              // <ParallaxImage
              //   source={item.img}
              //   containerStyle={styles.imageContainer}
              //   style={styles.image}
              //   parallaxFactor={0.4}
              //   {...parallaxProps}
              // />
            )}
            // onMomentumScrollEnd={() => console.log(123)}
            // scrollEventThrottle={500}
            pagingEnabled
            // onScroll={this.localOnScrollChagne}
          />
        </View>
      );
    };

    return (
      // <View style={{ flex: 1, width: "100%", marginTop: 20 }}>
      <Carousel
        sliderWidth={screenWidth}
        sliderHeight={screenHeight}
        activeSlideAlignment={activeSlideAlignment}
        itemHeight={screenHeight - 120}
        data={data}
        renderItem={_renderItem}
        hasParallaxImages
        vertical
        onViewableItemsChanged={this.onVerticalItemsChanged}
        onEndReached={this.localChangeData}
        onEndReachedThreshold={1}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={this.localOnRefresh}
          />
        }
      />
      // </View>
    );
  }
}

const styles = StyleSheet.create({
  imageContainer: {
    flex: 1,
    marginBottom: Platform.select({ ios: 0, android: 1 }), // Prevent a random Android rendering issue
    backgroundColor: "white",
    borderRadius: 8,
  },
  item: {
    width: screenWidth,
    height: screenHeight,
  },
  image: {
    ...StyleSheet.absoluteFillObject,
    resizeMode: "cover",
    // width: "100%",
    // height: 300,
  },
});

export default MyCarousel;
